<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI选股 - 首页</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        .tabs {
            display: flex;
            border-bottom: 1px solid #ebedf0;
            background-color: #fff;
        }
        .tab {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 15px;
            font-weight: 500;
            color: #646566;
            position: relative;
        }
        .tab.active {
            color: #1989fa;
        }
        .tab.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 3px;
            background-color: #1989fa;
            border-radius: 3px;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 导航栏 -->
        <div class="navbar">
            <div class="navbar-btn">
                <i class="fas fa-bell"></i>
            </div>
            <div class="navbar-title">AI选股</div>
            <div class="navbar-btn">
                <i class="fas fa-plus"></i>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="content">
            <!-- 搜索栏 -->
            <div class="search-bar">
                <i class="fas fa-search"></i>
                <input type="text" class="search-input" placeholder="搜索股票代码或名称">
            </div>

            <!-- 每日推荐卡片 -->
            <div class="card">
                <div class="card-content bg-gradient-to-r from-blue-500 to-indigo-600 text-white p-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-xl font-bold mb-1">今日AI推荐</h3>
                            <p class="text-sm opacity-80">基于多维度分析的精选推荐</p>
                        </div>
                        <div class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                            <i class="fas fa-robot text-white text-xl"></i>
                        </div>
                    </div>
                    <button class="mt-3 bg-white text-blue-600 px-4 py-2 rounded-full text-sm font-medium">
                        查看详情 <i class="fas fa-arrow-right ml-1"></i>
                    </button>
                </div>
            </div>

            <!-- 股票列表 Tab 切换 -->
            <div class="card">
                <div class="tabs">
                    <div class="tab active" id="watchlist-tab">自选股</div>
                    <div class="tab" id="positions-tab">我的持仓</div>
                </div>
                
                <!-- 我的自选股 -->
                <div class="tab-content active" id="watchlist-content">
                    <div class="flex justify-between items-center px-4 py-2">
                        <span class="text-sm text-gray-500">共2支股票</span>
                        <div>
                            <i class="fas fa-plus text-gray-400 text-sm mr-2"></i>
                            <i class="fas fa-sync-alt text-gray-400 text-sm"></i>
                        </div>
                    </div>
                    <div>
                        <!-- 股票项 1 - 上涨 -->
                        <div class="stock-item">
                            <div class="stock-info">
                                <div class="stock-name">宁德时代</div>
                                <div class="stock-code">300750.SZ</div>
                            </div>
                            <div class="stock-price">
                                <div class="current-price">236.78</div>
                                <div class="price-change price-up">+6.38 (+2.77%)</div>
                            </div>
                        </div>

                        <!-- 股票项 2 - 下跌 -->
                        <div class="stock-item">
                            <div class="stock-info">
                                <div class="stock-name">中国平安</div>
                                <div class="stock-code">601318.SH</div>
                            </div>
                            <div class="stock-price">
                                <div class="current-price">42.82</div>
                                <div class="price-change price-down">-0.18 (-0.42%)</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 我的持仓记录 -->
                <div class="tab-content" id="positions-content">
                    <div class="flex justify-between items-center px-4 py-2">
                        <span class="text-sm text-gray-500">共3支股票</span>
                        <div>
                            <i class="fas fa-sync-alt text-gray-400 text-sm"></i>
                        </div>
                    </div>
                    <div>
                        <!-- 股票项 1 - 上涨 -->
                        <div class="stock-item">
                            <div class="stock-info">
                                <div class="stock-name">腾讯控股</div>
                                <div class="stock-code">00700.HK <span class="text-xs text-gray-500">持有1000股</span></div>
                            </div>
                            <div class="stock-price">
                                <div class="current-price">388.60</div>
                                <div class="price-change price-up">+8.40 (+2.21%)</div>
                            </div>
                        </div>

                        <!-- 股票项 2 - 下跌 -->
                        <div class="stock-item">
                            <div class="stock-info">
                                <div class="stock-name">阿里巴巴</div>
                                <div class="stock-code">09988.HK <span class="text-xs text-gray-500">持有500股</span></div>
                            </div>
                            <div class="stock-price">
                                <div class="current-price">76.25</div>
                                <div class="price-change price-down">-1.35 (-1.74%)</div>
                            </div>
                        </div>

                        <!-- 股票项 3 - 上涨 -->
                        <div class="stock-item">
                            <div class="stock-info">
                                <div class="stock-name">贵州茅台</div>
                                <div class="stock-code">600519.SH <span class="text-xs text-gray-500">持有20股</span></div>
                            </div>
                            <div class="stock-price">
                                <div class="current-price">1688.00</div>
                                <div class="price-change price-up">+38.00 (+2.30%)</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部标签栏 -->
        <div class="tabbar">
            <div class="tab-item active">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-chart-line"></i>
                <span>每日推荐</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-list-ul"></i>
                <span>自选</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>

    <script>
        // Tab切换逻辑
        document.getElementById('positions-tab').addEventListener('click', function() {
            document.getElementById('positions-tab').classList.add('active');
            document.getElementById('watchlist-tab').classList.remove('active');
            document.getElementById('positions-content').classList.add('active');
            document.getElementById('watchlist-content').classList.remove('active');
        });

        document.getElementById('watchlist-tab').addEventListener('click', function() {
            document.getElementById('watchlist-tab').classList.add('active');
            document.getElementById('positions-tab').classList.remove('active');
            document.getElementById('watchlist-content').classList.add('active');
            document.getElementById('positions-content').classList.remove('active');
        });
    </script>
</body>
</html> 